<template>
	<view>
		<view class="content">
			<view class="driver seat_item">
				<view class="img-bg"><image :src="driverIconBase64" mode=""></image></view>
			</view>
			<view class="seat_list">
				<view 
					class="common-wrap"
					v-for="(item, index) in seatList"
					:key="index"
				>
					<view 
						class="seat_item"
						v-for="(it_s, in_s) in item"
						:key="in_s"
						@click="handleChooseSeat(it_s, index, in_s)"
					>
						<view class="img-bg"><image :src="it_s.active?seat2Base64 : it_s.display?seat0Base64:seat1Base64" mode=""></image></view>
						<text class="num">{{it_s.num}}</text>
					</view>
				</view>
				<view class="last_seat-wrap">
					<view 
						class="seat_item"
						v-for="(it_, in_l) in lastSeatList"
						:key="in_l"
						@click="handleChooseLastSeat(it_, in_l)"
					>
						<!-- <image src="../static/imgs/icons/zuo_no.png" mode=""></image> -->
						<view class="img-bg"><image :src="it_.active?seat2Base64 : it_.display?seat0Base64:seat1Base64" mode=""></image></view>
						<text class="num">{{it_.num}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tp-h98">
			
		</view>
		<view class="common-btn" @click="handleConfrimChoosedSeat">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				driverIconBase64: '',
				// 不能选的坐
				seat0Base64: '',
				// 空白的坐
				seat1Base64: '',
				// 我选的坐
				seat2Base64: '',
				// #endif
				// #ifdef H5
				driverIconBase64: '../static/imgs/icons/zuo_siji.png',//司机
				seat0Base64: '../static/imgs/icons/zuo_no.png',    // 不能选的坐
				seat1Base64: '../static/imgs/icons/zuo_wei.png',// 空白的坐
				seat2Base64: '../static/imgs/icons/zuo_yixuan.png', // 我选的坐
				// #endif
				totalSeatNum: 49, // 总座位数
				seatList: [],
				choosedSeatArr: [], // 选择的座位列表
				maxSeatNum: 1, // 最大可选座位的数量
				busInfo: {},
				disabledSeatList: [], // 已经选择的座位
				type: null, // 判断是否往返 from|to
			};
		},
		onLoad(opt) {
			this.choosedSeatArr = opt && opt.choosedSeatList && JSON.parse(opt.choosedSeatList)
			this.busInfo = opt && opt.busInfo && JSON.parse(opt.busInfo)
			this.type = opt && opt.type
			
		},
		onShow() {
			this.getSeatList()
			this.getRiderList()
			this.updateSeatList()
		},
		computed: {
			lastSeatList() {
				let arr = []
				let len = this.totalSeatNum
				for(let i=len;i>len-5;i--) {
					arr.unshift({
						num: i,
						display: false
					})
				}
				arr.forEach((it, i) => {
					this.disabledSeatList.forEach((p, p_i) => {
						if (it.num == p) {
							arr[i].display = true
						}
					})
				})
				return arr
			}
		},
		methods: {
			handleChooseSeat(item,index,in_) {
				if (this.choosedSeatArr.length >= this.maxSeatNum && this.choosedSeatArr.includes(item.num) && !item.display) {
					item.active = !item.active
					this.$set(this.seatList[index], in_, item)
					if (this.choosedSeatArr.findIndex((el) => el===item.num) !== -1) {
						let i = this.choosedSeatArr.findIndex((el) => el===item.num)
						this.choosedSeatArr.splice(i,1)
					}
				} else if (this.choosedSeatArr.length < this.maxSeatNum && !item.display) {
					item.active = !item.active
					this.$set(this.seatList[index], in_, item)
					if (item.active) {
						this.choosedSeatArr.push(item.num)
					} else if (this.choosedSeatArr.findIndex((el) => el===item.num) !== -1) {
						let i = this.choosedSeatArr.findIndex((el) => el===item.num)
						this.choosedSeatArr.splice(i,1)
					}
				}
			},
			handleChooseLastSeat(item,i) {
				 if (this.choosedSeatArr.length < this.maxSeatNum && !item.display) {
					 item.active = !item.active
					 this.$set(this.lastSeatList,i, item)
					 if (item.active) {
					 	this.choosedSeatArr.push(item.num)
					 } else if (this.choosedSeatArr.findIndex((el) => el===item.num) !== -1) {
					 	let i = this.choosedSeatArr.findIndex((el) => el===item.num)
					 	this.choosedSeatArr.splice(i,1)
					 }
				 } else if (this.choosedSeatArr.findIndex((el) => el===item.num) !== -1 && !item.display) {
					 item.active = !item.active
					 this.$set(this.lastSeatList,i, item)
					 let i = this.choosedSeatArr.findIndex((el) => el===item.num)
					 this.choosedSeatArr.splice(i,1)
				 }
			},
			handleConfrimChoosedSeat() {
				if (this.type) { // 往返
					let oj = {
						[this.type]: this.choosedSeatArr
					}
					console.log('obj', oj);
					this.$store.commit('upSeatListObj', oj)
				} else { // 单程
					this.$store.commit('upSeatList', this.choosedSeatArr)
				}
				let num = this.maxSeatNum - 0 - this.choosedSeatArr.length
				if (num != 0) {
					uni.showToast({
						title: '您还有'+ num  +'个座位待选喔',
						icon: 'none'
					})
				} else {
					uni.navigateBack({delta: 1});
				}
			},
			getSeatList() {
				let arr = []
				let len = this.totalSeatNum
				for(let i=1;i<=len-5;i++) {
					if (i%2===0) {
						arr.push([
							{
								num: i-1,
								display: false
							},{
								num: i,
								display: false
							}
						])
					}
				}
				this.seatList = arr
				let { schedulingId } = this.busInfo
				this.$http.get(this.$api.getDisabledSiteList + schedulingId).then(res => {
					if (res.code === 200) {
						this.disabledSeatList = res.data
						this.disabledSeatList.forEach(item => {
							arr.forEach((p, p_i) => {
								p.forEach((m, m_i) => {
									if (item == m.num) {
										arr[p_i][m_i].display = true
									}
								})
							})
							this.seatList = arr
						})
					}
				})
			},
			getRiderList() { // 获取乘车人数，判断需要选择几个座位
				let arr = this.$store.getters.getRiderList
				this.maxSeatNum = arr.length
			},
			updateSeatList() {
				this.seatList.forEach(item => {
					item.forEach(it_ => {
						if(this.choosedSeatArr.includes(it_.num)) {
							it_.active = true
						}
					})
				})
				this.lastSeatList.forEach(item => {
					if(this.choosedSeatArr.includes(item.num)) {
						item.active = true
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.seat_item {
	margin-bottom: 36rpx;
	height: 66rpx;
	width: 72rpx;
	position: relative;
	.img-bg {
		height: 66rpx;
		width: 72rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifdef MP-WEIXIN */
		z-index: -1;
		/* #endif */
	}
	.num {
		position: absolute;
		left: 50%;
		top:2%;
		transform: translateX(-50%);
		font-size: 32rpx;
		color: #666;
	}
}
.content {
	padding: 0 56rpx;
	.driver {
		margin: 53rpx 0 39rpx;
		height: 66rpx;
		width: 72rpx;
		position: relative;
	}
	.seat_list {
		display: flex;
		flex: 1;
		justify-content: space-between;
		flex-wrap: wrap;
		.common-wrap {
			width: 214rpx;
			display: flex;
			justify-content: space-between;
			&:nth-child(2n-1) {
				padding-right: 100rpx;
			}
			&:nth-child(2n) {
				padding-left: 100rpx;
			}
		}
		.last_seat-wrap {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}
	}
}
.common-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: none;
	width: 580rpx;
	margin-bottom: 34rpx;
}
</style>
